框架：vue2.x、vue3 ui框架：element-ui、element-plus

在开发页面时，经常会遇到类似的需求，某某情况下弹个窗提示，达到引导用户的效果，比如没有权限，提示用户去充钱，比如下面：

这种情况下的弹窗除了提示功能外没有其他任务的交互动作，而我们在组件中写一个弹窗得这样：

可以看到需要一大段的html来定义，还要控制显示隐藏的变量，显示隐藏的方法。需要非常多的代码片段来支持，会使我们的组件变得非常杂乱，只为了一个提示弹窗，而且既然是项目的提示弹窗，那么基本在很多地方都会用到，这样一个组件一个组件去写肯定不是办法。

解决方法之一就是定义个全局组件 弹窗的标题，内容由props传入，但还是要由外部去控制它的显示隐藏，使用情况会变成类似下面的情况:

弹窗的关闭需要在组件内去改变父组件的变量，就是上面传入visible后面的**.sync**修饰符，在弹窗组件中就可以:

这样在调用弹窗的地方还是要定义变量与方法，而且要在template中写好标签，还是显得麻烦，所以想要实现的就是函数调用的方式，比如通过this.$dialog()的方式调用，像调用element的message组件一样方便。

接下来就是实现，进入主题。

vue2中实现 弹窗的显示与隐藏通过挂载到body上面与从body上移除来实现，下面是我的组件目录:

在index.vue中编写组件，在index.js中实现函数调用，先看index.vue:

样式就不贴出来了，就是一个普通的组件，当关闭弹窗时触发close方法，在这个方法中移除这个组件，this.$el拿到组件渲染后的dom，然后就是原生的js api了。

接下来就重要的index.js:

里面最重要的就是Vue.extend，通过它来创建一个Vue的子类，传入一个组件对象，然后通过new来创建组件实例，new的时候可以传入组件的属性，比如data、methods、生命周期函数等等，它会和组件内定义的属性结合，而不会直接覆盖该属性。 然后通过**.$mount()来渲染组件，上面的代码中，当执行instance.$mount()时会渲染组件，但还没挂载到页面上，再通过.$el就拿到组件实际上的dom了，当然$mount()也可以挂载，可以参考你们项目中的main.js**，所以上面的挂载到body上面也可以写成:

到这里就很清晰了，通过调用editionTip函数，来创建一个弹窗组件挂载到body上面，我们可以挂载到Vue的prototype上，方便调用，在mian.js中：

然后在组件中:

参数就是上面的options，会和组件里面的data结合。

vue3中实现 vue3一来，好家伙，全都变了，官方文档又只能看懂一丢丢，想实现某个功能发现和vue2的不一样就头疼了，在现阶段搜索还真的搜不到。下面的实现方法纯属我自己瞎折腾出来的，如果你有更好的实现方法，求指教。 vue3中创建根实例不再是new Vue了，而是通过createApp来创建，但和vue2一样的是都是挂载到页面某个dom上，这里贴一下vue3中的main.ts（我用的ts，下面代码与用js无实质区别）

首先挂载组件是用过createApp的mount来的，那取消挂载呢，在官方文档发现了createApp出来的实例有一个unmount方法，可以来在页面中销毁组件的dom。 然后我们要可以传递变量给组件，那通过createApp()这种方法怎么传递变量给组件呢，我们点进去createApp这个方法里面去看看：

发现第二个参数可以传递props，那就可以解决我们传递变量这个需求，而且还解决了下一个需求。 上面说了我们销毁组件要通过调用createApp出来的实例的unmount方法，但是我们是将组件传递给createApp这个方法，所以在组件里面是操作不了createApp出来的实例的，就需要有外部传递一个方法给组件供组件去调用销毁自己（我杀我自己？） 大概思路就是如此，接下来是实现，与vue2中一样，两个文件一个写组件一个写挂载的方法：

首先dialog.vue:

vue3的template可以不用根标签。关闭弹窗的时候调用props传进来的close方法。

dialog.ts:

这是最基础的思路，挂载到body上面。我们在某个组件中引入这个方法：

点击后：

我们发现整个body下面的东西全部被我替换成组件里面的dom，而且element的组件也没渲染 解决第一个问题很简单，我们创建一个dom插入body中，再将组件挂载到这个dom上，这样就不会印象到其他组件。 第二个问题是因为我们这个app实例和mian中的app实例是完全不同的两个app实例，所以在这边也需要use一下element 改版后的dialog.ts:

调整之后：

完美。 vue3我也是刚接触，如果有更正确的实现方式欢迎指教哦。